<%--
  Created by IntelliJ IDEA.
  User: MY PC
  Date: 2018/11/16
  Time: 17:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Jquery Ajax</title>
    <script src="/js/jquery-3.3.1.js"></script>
</head>
<script>
    $(function () {
        //get请求
        $("#btn1").click(function () {
            var username = $('#username').val()
            var passwd = $('#passwd').val()
            var params = {"username": username, "passwd": passwd};
            var url = "/login";
            $.get(url, params, function (data) {
                console.log(data)
            }, "text")
        })
        //post请求
        $("#btn2").click(function () {
            var username = $('#username').val()
            var passwd = $('#passwd').val()
            var params = {"username": username, "passwd": passwd};
            var url = "/login";
            $.post(url, params, function (data) {
                console.log(data)
            }, "text")
        })
        //form表单直接打包,把表单作为参数传递
        $("#btn3").click(function () {
            var url = "/login";
            console.log($("#loginform").serialize())//username=asdf&passwd=asdf
            $.post(url, $("#loginform").serialize(), function (data) {
                console.log(data)
            }, "text")

            //遍历表单的所有属性
            var array = $("#loginform").serializeArray()
            for (var i = 0; i < array.length; i++) {
                var x = array[i];
                console.log(x)//{name: "username", value: "asdf"}
                console.log(x.name + " >>> " + x.value)//username >>> asdf
            }
        })
    })
</script>
<body>
<form method="post" action="" id="loginform">
    用户名: <input type="text" id="username" name="username" placeholder="请输入用户名"><br><br>
    密 码: <input type="password" id="passwd" name="passwd" placeholder="请输入密码"><br><br>
    <input type="button" value="get登录" id="btn1"><br><br>
    <input type="button" value="post登录" id="btn2"><br><br>
    <input type="button" value="from登录" id="btn3"><br><br>
</form>
</body>
</html>
